<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
const option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#fff",
      },
    },
  },
  grid: {
    //调整图表位置
    show: false, //是否显示直角坐标系网格
    top: "15%", // 一下数值可为百分比也可为具体像素值
    right: "5%",
    bottom: "10%",
    left: "10%",
  },
  legend: {
    top: "5%",
    data: [
      {
        name: "柱子名称",
        textStyle: {
          color: "#A9DDEE", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "其他消耗",
        textStyle: {
          color: "#A9DDEE", // 单独设置某一个图列的颜色
        },
      },
    ],
  },
  xAxis: [
    {
      type: "category",
      data: ["A类", "B类", "C类", "D类", "E类", "F类", "G类", "H类"],
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        show: false, //横轴样式
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#85B0C4",
        },
      },
      axisTick: {
        show: false, //隐藏刻度线
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      barWidth: "35%",
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#08426D"],
          width: 1,
          type: "solid",
        },
      },
      axisLabel: {
        // y轴 数据格式和颜色
        show: true,
        formatter: "{value} 个",
        textStyle: {
          color: "#85B0C4",
        },
      },
    },
  ],
  series: [
    {
      name: "柱子名称",
      type: "bar",
      barWidth: "20%",
      data: [40, 50, 60, 65, 54, 65, 60, 50],
      itemStyle: {
        color: {
          type: "linear",
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: "#192F68", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#18E0FD", // 90% 处的颜色
            },
          ],
        },
      },
    },
    {
      name: "其他消耗",
      type: "line",
      data: [35, 62, 84, 52, 44, 96, 78, 66],
      itemStyle: {
        color: '#51FEC2',
      },
    },
  ],
})
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
